;(function (window) {

  const hlPageHeader = {
    name: 'HlPageHeader',
    template:`<div class="hl-page-header-container" >
      <div class="hl-page-header__header">
        <div class="hl-page-header__title" @click="handleTitleClick">
          <p class="hl-page-header__name" :style="{color:titleColor,fontSize:titleFont,fontWeight:titleFontWeight}">{{title}}</p>
          <slot name="title"></slot>
        </div>

        <div class="hl-page-header__operation">
          <slot></slot>
        </div>
      </div>
    </div>`,
    data(){
      return {

      }
    },
    props:{
      title:{
        type:String,
        default:''
      },
      titleColor:{
        type:String,
        default:'#666'
      },
      titleFont:{
        type:String,
        default:'16px'
      },
      titleFontWeight:{
        type:String,
        default:'bolder'
      }
    },
    computed:{

    },
    methods:{
      handleTitleClick(){
        this.$emit('on-title-click','$event')
      }
    }
  }

  Vue.component('hl-page-header',hlPageHeader)

} (window))
